<!--
 * @Author: gao_m3
 * @Date: 2020-12-01 14:16:45
 * @LastEditors: zhong_m
 * @LastEditTime: 2022-02-11 16:55:50
 * @Descripttion: 
-->
<template>
  <div class="server-container">
    <div class="vertical-line" />
    <div class="server-container-left">
      <div class="server-container-left-title">
        <div style="display: flex; align-items: center; height: 36px">
          <fks-icon
            class="svg-icon"
            icon-class="server-client"
          />
          {{ LANG.CLIENT }}
        </div>
        <div>
          <i
            class="fks-icon-plus"
            style="width: 16px; height: 16px"
            @click="newFileType()"
          />
        </div>
      </div>
      <div
        v-for="(item, serverId) in fileServerConfig.client"
        :key="serverId"
        :class="[
          'client-item',
          {
            'client-item-active': selectedClientId == serverId
          }
        ]"
        @click="clientChoose(item, serverId)"
      >
        {{ clientName[serverId] }}
      </div>
    </div>

    <div style="width: calc(100% - 264px)">
      <div class="table-title-container">
        <div style="display: flex; align-items: center">
          <div class="fks-title-icon" />
          <div class="tableName">
            {{ LANG.FILE }}
          </div>
        </div>
        <div>
          <fks-button
            class="fileButton"
            style="margin-left: 10px"
            icon="fks-icon-plus"
            type="primary"
            @click="addFileItem(serverId)"
          >
            {{ LANG.ADD }}
          </fks-button>
          <fks-button
            v-permission="['server:client:delete']"
            class="fileButton"
            style="border-color: #ff4d4f; color: #ff4d4f"
            icon="fks-icon-delete"
            @click="deleteType(serverId)"
          >
            {{ LANG.DELETE }}
          </fks-button>
        </div>
      </div>
      <fks-table
        :data="fileServerData"
        tooltip-effect="dark"
      >
        <fks-table-column
          type="index"
          label="#"
          align="center"
          min-width="50px"
        />
        <fks-table-column
          :label="LANG.SERVER_ADDRESS"
          prop="endpoint"
          align="left"
          min-width="120"
          header-align="center"
        />
        <fks-table-column
          :label="LANG.ACCOUNT"
          align="left"
          min-width="120"
          header-align="center"
          prop="accessKey"
        />
        <fks-table-column
          :label="LANG.BUCKET_NAME"
          align="left"
          header-align="center"
          prop="bucketName"
        />
        <fks-table-column
          :label="LANG.SERVER_TYPE"
          prop="ossType"
        />

        <fks-table-column
          :label="LANG.STATE"
          prop="state"
        >
          <template slot-scope="scope">
            <fks-tag
              v-if="scope.row.state"
              type="success"
            >
              {{ LANG.ON }}
            </fks-tag>
            <fks-tag
              v-if="!scope.row.state"
              effect="plain"
              type="info"
            >
              {{ LANG.OFF }}
            </fks-tag>
          </template>
        </fks-table-column>
        <fks-table-column
          :label="LANG.OPERATION"
          width="200px"
          align="center"
        >
          <span slot-scope="scope">
            <fks-button
              v-if="!scope.row.state"
              v-permission="['file:on']"
              type="text"
              @click="fileOn(scope.$index)"
            >{{ LANG.ENABLE }}</fks-button>
            <fks-button
              v-if="scope.row.state"
              v-permission="['file:off']"
              type="text"
              @click="fileOff(scope.$index)"
            >{{ LANG.DISABLE }}</fks-button>
            <fks-button
              v-permission="['file:edit']"
              type="text"
              @click="editItem(scope.$index, serverId)"
            >{{ LANG.EDIT }}</fks-button>
            <fks-button
              v-permission="['file:delete']"
              danger-text
              @click="deleteItem(scope.$index, serverId)"
            >{{ LANG.DELETE }}</fks-button>
          </span>
        </fks-table-column>
      </fks-table>
    </div>
    <add-file-config
      :show-dialog="showDialog"
      :submit-type="submitType"
      :config="addFileConfig"
      :file-state="newFileState"
      :all-client-id="allClientId"
      :client="fileServerConfig.client"
      :client-name="clientName"
      @close="close"
      @submit="submit(arguments)"
    />
  </div>
</template>

<script>
import { getClient } from '../../api'
import AddFileConfig from './AddFileConfig.vue'
import { nodePermission } from '@/permission'
export default {
  name: 'FileServer',
  components: { AddFileConfig },
  props: {
    fileServerConfig: {
      required: true,
      type: Object
    },
    updateConfig: {
      required: true,
      type: Function
    }
  },
  data() {
    return {
      selectedClientId: '',
      serverId: '',
      fileServerData: [],
      fileServerClient: '', //当前选择的应用配置
      clientName: {}, //应用信息
      allClientId: [], //全部应用的id
      clientId: [], //全部-现在
      submitType: false, //false修改 true新增，
      showDialog: false,
      fileType: '',
      fileIndex: 0,
      addFileConfig: {
        endpoint: '',
        accessKey: '',
        ossType: '',
        secretKey: '',
        bucketName: ''
      },
      newFileState: false //是否是需要新增
    }
  },
  computed: {
    // 判断是否展示新增按钮
    showAddButton() {
      return nodePermission(['server:client:add'], { types: ['1'] })
    }
  },
  watch: {
    fileServerConfig(nval) {
      if (
        Object.keys(nval.client).length &&
        (!this.fileServerClient || this.fileServerClient === '0')
      ) {
        this.fileServerClient = Object.keys(nval.client)[0]
        this.selectedClientId = Object.keys(this.fileServerConfig.client)[0]
        this.serverId = Object.keys(this.fileServerConfig.client)[0]
        this.fileServerData = this.fileServerConfig.client[
          this.selectedClientId
        ]
      }
    }
  },
  mounted() {
    //获取应用信息
    getClient()
      .then((res) => {
        if (res.data) {
          for (var a in res.data) {
            let type = res.data[a].clientId
            this.clientName[type] = res.data[a].clientName
            if (!(this.allClientId.indexOf(type) > -1)) {
              this.allClientId.push(type)
            }
          }
        }
      })
      .catch(() => {})
  },
  methods: {
    submit(e) {
      if (this.newFileState) {
        this.fileServerConfig.client[e[1]] = []
        this.clientId.splice(this.clientId.indexOf(e[1]), 1)
        this.fileServerClient = e[1]
        this.fileType = e[1]
      }
      let len = this.submitType
        ? this.fileServerConfig.client[this.fileType].length
        : this.fileIndex
      this.fileServerConfig.client[this.fileType].splice(
        len,
        this.submitType ? 0 : 1,
        e[0]
      )

      this.showDialog = false
      this.updateConfigWithMsg(
        this.submitType ? this.LANG.ADD_SUCCESS : this.LANG.EDIT_SUCCESS
      )
    },
    initFileItem() {
      if (this.submitType) {
        this.addFileConfig.endpoint = ''
        this.addFileConfig.secretKey = ''
        this.addFileConfig.accessKey = ''
        this.addFileConfig.bucketName = ''
        // this.addFileConfig.ossType = ''
        delete this.addFileConfig.ossType
        // this.addFileConfig.state= true
      } else {
        this.addFileConfig = JSON.parse(
          JSON.stringify(
            this.fileServerConfig.client[this.fileType][this.fileIndex]
          )
        )
      }
    },
    close() {
      this.showDialog = false
    },
    clientChoose(item, serverId) {
      this.selectedClientId = serverId
      this.fileServerData = item
      this.serverId = serverId
    },
    //不选中加号的处理
    beforeLeave(activeName, oldActiveName) {
      if (activeName == 'addButton') {
        this.newFileType()
        return false
      }
      return true
    },
    //新增应用
    newFileType() {
      this.newFileState = true
      this.submitType = true
      this.initFileItem()
      this.showDialog = true
    },
    deleteType(type) {
      this.$confirm(this.LANG.CLIENT_DELETE, {
        title: this.LANG.TIPS,
        confirmButtonText: this.LANG.DELETE,
        cancelButtonText: this.LANG.CANCEL,
        deleteMode: true
      })
        .then(() => {
          let index = '' //获取删除前一个client
          for (var a in this.fileServerConfig.client) {
            if (a != type) index = a
            else break
          }
          delete this.fileServerConfig.client[type]
          this.fileServerData = this.fileServerConfig.client[
            Object.keys(this.fileServerConfig.client)[0]
          ]
          this.selectedClientId = Object.keys(this.fileServerConfig.client)[0]
          this.fileServerConfig = JSON.parse(
            JSON.stringify(this.fileServerConfig)
          ) //触发vue更新
          this.clientId.push(type)
          this.fileServerClient = index
          this.updateConfigWithMsg(this.LANG.DELETE_SUCCESS)
        })
        .catch(() => {})
    },
    //新增文件服务器
    addFileItem(type) {
      this.newFileState = false
      this.submitType = true
      this.fileType = type
      this.initFileItem()
      this.showDialog = true
      this.fileConfigAdd = true
    },
    fileOn(index) {
      this.$confirm(this.LANG.FILE_ON, {
        title: this.LANG.CONFIRM,
        type: 'warning',
        confirmButtonText: this.LANG.DETERMINE,
        cancelButtonText: this.LANG.CANCEL,
        confirmButtonClass: 'fks-icon-check',
        cancelButtonClass: 'fks-icon-close'
      })
        .then(() => {
          this.$set(this.fileServerData[index], 'state', true)
          this.updateConfigWithMsg(this.LANG.ENABLE_SUCCESS)
        })
        .catch(() => {})
    },
    fileOff(index) {
      this.$confirm(this.LANG.FILE_OFF, {
        title: this.LANG.CONFIRM,
        type: 'warning',
        confirmButtonText: this.LANG.DETERMINE,
        cancelButtonText: this.LANG.CANCEL,
        confirmButtonClass: 'fks-icon-check',
        cancelButtonClass: 'fks-icon-close'
      })
        .then(() => {
          this.$set(this.fileServerData[index], 'state', false)
          this.updateConfigWithMsg(this.LANG.OFF_SUCCESS)
        })
        .catch(() => {})
    },
    updateConfigWithMsg(message) {
      this.updateConfig({ fileServerConfig: this.fileServerConfig })
        .then((res) => {
          if (res.status) {
            this.$message({
              type: 'success',
              message: message
            })
          }
        })
        .catch(() => {})
    },
    editItem(index, type) {
      this.fileType = type
      this.fileIndex = index
      this.submitType = false
      this.initFileItem()
      this.newFileState = false
      this.showDialog = true
    },
    deleteItem(index, type) {
      this.$confirm(this.LANG.FILE_DELETE, {
        title: this.LANG.TIPS,
        confirmButtonText: this.LANG.DELETE,
        cancelButtonText: this.LANG.CANCEL,
        deleteMode: true
      })
        .then(() => {
          this.submitType = false
          this.fileServerConfig.client[type].splice(index, 1)
          this.updateConfigWithMsg(this.LANG.DELETE_SUCCESS)
        })

        .catch(() => {})
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/assets/css/variables.scss';
.server-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  position: relative;
  padding: 24px;
  .vertical-line {
    position: absolute;
    left: 263px;
    top: 0;
    bottom: 0;
    height: 100%;
    border-left: 1px solid #eee;
    pointer-events: none;
  }
  &-left {
    height: 100%;
    width: 240px;
    padding-right: 24px;
    &-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #eee;
      line-height: 37px
    }
  }
}
.client-item {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 14px;
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
    Microsoft YaHei, SimSun, sans-serif;
  font-weight: 400;
  padding: 0 0 0 24px;
  text-align: left;
  position: relative;
  color: #191919;
  height: 36px;
  line-height: 36px;
  cursor: pointer;
  &:hover {
    background-color: mix(#ffffff, $theme, 95%);
  }
}
.client-item-active {
  background-color: mix(#ffffff, $theme, 90%) !important;
}
.svg-icon {
  color: black;
  width: 16px;
  height: 16px;
  margin-right: 8px;
}
.fks-icon-plus {
  width: 16px;
  height: 16px;
  color: var(--theme-color);
  cursor: pointer;
}
.table-title-container {
  display: flex;
  line-height: 36px;
  margin-bottom: 24px;
  justify-content: space-between;
  height: 36px;

  .tableName {
    color: #191919;
    font-size: 16px;
    font-weight: 600;
  }
}
.mobile {
  @media screen and (max-width: 480px) {
    .file-tab {
      display: flex;
      overflow: auto;
      ::v-deep .fks-tabs__content {
        flex: 0 0 100%;
      }
    }
  }
}
</style>